<template>
  <div class="content-container box" style="height:100%">
    <div class="left">
      <div class="left-top" v-if="adminFlag">
        <Doing style="width:49.5%"></Doing>
        <NoDone style="width:49.5%"></NoDone>
      </div>

      <!-- 不要使用v-show只是会隐藏，元素会存在，组件内部的请求还是会发出 -->
      <Total v-if="adminFlag"></Total>

      <Manning v-if="adminFlag"></Manning>

      <!-- -------------------------- -->

      <MyDoing v-if="!adminFlag" :developFlag="developFlag" :testFlag="testFlag"></MyDoing>
      <MyNoDone v-if="!adminFlag"></MyNoDone>
    </div>
    <div class="right">
      <TestTotal v-if="!adminFlag"></TestTotal>
      <Help style="margin-top: 10px;"></Help>
      <CompanyPlan></CompanyPlan>
    </div>
  </div>
</template>

<script>
import CompanyPlan from "./component/companyPlan";
import Help from "./component/help";
import Total from "./component/Total";
import TestTotal from "./component/testTotal";
import Manning from "./component/manning";
import Doing from "./component/doing";
import NoDone from "./component/noDone";
import MyDoing from "./component/myDoing";
import MyNoDone from "./component/myNoDone";

export default {
  name: "workbench",
  components: {
    CompanyPlan,
    Help,
    Total,
    TestTotal,
    Manning,
    Doing,
    NoDone,
    MyDoing,
    MyNoDone
  },
  data() {
    return {
      fid: "",
      adminFlag: true, // flag默认为true的时候,登录职能组为管理员
      developFlag: true, // flag默认为true的时候,登录职能组为开发组
      testFlag: true // flag默认为true的时候,登录职能组为测试
    };
  },
  methods: {
    init() {
      //角色不是管理员的时候 控制部分页面不显示
      if (this.fid != 25 && this.fid != 0) {
        this.adminFlag = false;
        // fid角色是21为测试职能组，能看到执行中的任务里的测试阶段和操作功能
        if (this.fid == 24) {
          this.developFlag = false;
          this.testFlag = false;
        }
        if (this.fid == 21) {
          this.developFlag = !this.developFlag;
        }
      } else {
        this.adminFlag = true;
        this.developFlag = false;
        this.testFlag = false;
      }
    }
  },
  created() {
    this.fid = sessionStorage.getItem("fid");
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  padding: 20px;

  .left {
    width: 66%;
    height: 100%;
    margin-right: 10px;

    .left-top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .right {
    width: 34%;
    height: 100%;
    margin-top: 10px;
  }
}
</style>